<template>
  <div class="relative">
    <div class="electronic-title flex items-center gap-10">
      <div class="title">导入电子投标文件</div>
      <div class="tag">最高限价：{{ maxPrice.toLocaleString('zh') }} 元</div>
    </div>
    <ClTable
      ref="refTable"
      show-index
      :table-data="supplierInfoList"
      :filter-form-item="filterList"
      @sent-table-data="onSentTableData"
    >
      <template #opt-btn="{}">
        <el-button type="primary" plain @click="onBatchUpload">批量上传</el-button>
        <el-button type="primary" plain @click="onAddQuote">追加报价</el-button>
        <el-button type="primary" plain @click="onBatchConfirm">批量确认</el-button>
        <el-button type="primary" plain @click="onBatchCancelConfirm">批量取消确认</el-button>
        <el-button type="primary" @click="onSupplierGet">供应商获取</el-button>
      </template>
      <template #column>
        <el-table-column label="供应商名称" prop="supplierName" fixed="left" min-width="250" />
        <el-table-column label="投标报价(元/%)" prop="bidPrice" width="150">
          <template #default="{ row }">
            <el-input v-model="row['bidPrice']" clearable size="default" @change="onChangeBidPrice(row)" />
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in dynamicColumn" :key="item" :label="'报价' + (index + 1)" width="120">
          <template #header="{ column }">
            <div class="relative">
              <span>{{ column.label }}</span>
              <el-icon class="del-icon" @click.stop="onHeaderClick({ column }, item)">
                <Delete />
              </el-icon>
            </div>
          </template>
          <template #default="{ row }">
            <el-input
              v-model="row['supplierAppendList'][index]['appendPrice']"
              size="default"
              clearable
              @change="onChangeAppendPrice(row['supplierAppendList'][index])"
            />
          </template>
        </el-table-column>
        <el-table-column label="评审报价" prop="reviewPrice" width="150">
          <template #default="{ row }">
            <div :class="showRedBorder(row['reviewPrice'], maxPrice)">
              <el-input v-model="row['reviewPrice']" clearable size="default" @change="onChangeReviewPrice(row)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单位确认" prop="unitConfirm" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.unitConfirm"
              :active-value="1"
              :inactive-value="0"
              size="default"
              @change="onChangeUnitConfirm(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="项目负责人" prop="projectManager" width="150">
          <template #default="{ row }">
            <el-input
              v-model="row['projectManager']"
              clearable
              size="default"
              @change="(val) => onChangeProjectManager(val, row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="工期" prop="duration" width="150">
          <template #default="{ row }">
            <el-input v-model="row['duration']" clearable size="default" @change="onChangeDuration(row)" />
          </template>
        </el-table-column>
        <el-table-column label="质量" prop="quality" width="150">
          <template #default="{ row }">
            <el-input v-model="row['quality']" clearable size="default" @change="onChangeQuality(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="relative">
              <el-button link type="primary" @click="handleView(row)">附件</el-button>
              <span class="absolute top-2 right-0 font-size-3" :style="{ color: row.isUpload ? '#8291a9' : '#f56c6c' }">
                {{ row.isUpload ? '已' : '未' }}上传
              </span>
            </div>
          </template>
        </el-table-column>
      </template>
    </ClTable>
    <CrudDialog v-if="hookVisible" v-model="hookVisible" :info="dialogInfo" :type="type" @at-close="onCloseDialog" />
    <PatchUploadDialog
      v-if="hookVisible2"
      v-model="hookVisible2"
      :info="dialogInfo2"
      :type="type2"
      @at-close="onCloseDialog2"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import CrudDialog from './components/CrudDialog.vue'
import PatchUploadDialog from './components/PatchUploadDialog.vue'
import { FILTER_FORM_ITEM } from './data'
import {
  batchCancelConfirm,
  batchConfirm,
  confirmUnit,
  deleteAppendPrice,
  getOASuppliers,
  savaAppendPrice,
  supplierInfoList,
  updateAppendPrice,
  updateBidPrice,
  updateDuration,
  updateProjectManager,
  updateQuality,
  updateReviewPrice
} from '@/api/electronic-bid-file'
import { projectInfoMaxPrice } from '@/api/project-info'
import { useProjectInfoStore } from '@/store/projectInfo'
const { projectInfo } = useProjectInfoStore()
onMounted(() => {
  getMaxPrice()
})
const refTable = ref()
const filterList = ref(FILTER_FORM_ITEM)
const maxPrice = ref(0)
const getMaxPrice = async () => {
  const res: any = await projectInfoMaxPrice(projectInfo.id)
  maxPrice.value = res
}
const showRedBorder = (value, maxPrice) => {
  const numValue = parseFloat(value)
  return !isNaN(numValue) && numValue - maxPrice > 0 ? 'red-box' : 'none'
}
// 动态表头
const dynamicColumn = ref<number>(0)
const onSentTableData = (data) => {
  if (Array.isArray(data) && data.length > 0) {
    dynamicColumn.value = data[0].supplierAppendList
  }
}

// 表头点击
const onHeaderClick = (_, item) => {
  elConfirmNoCancelBtn('确认框', '确定删除该报价吗？')
    .then(async (res) => {
      if (res === 'confirm') {
        await deleteAppendPrice({ appendBatch: item.appendBatch })
        await refTable.value.initTable()
      }
    })
    .catch((e) => {
      ElMessage.warning('取消删除！')
    })
}
//  查看附件
const { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(refTable)
const handleView = (row) => {
  type.value = `${row['supplierName']}-附件`
  onOpenDialog(row)
}
// 批量上传
const {
  type: type2,
  hookVisible: hookVisible2,
  dialogInfo: dialogInfo2,
  onOpenDialog: onOpenDialog2,
  onCloseDialog: onCloseDialog2
} = useDialog(refTable)

const onBatchUpload = () => {
  type2.value = '批量上传'
  onOpenDialog2({})
}
// 追加报价
const onAddQuote = async () => {
  await savaAppendPrice({ appendPrice: null })
  await refTable.value.initTable()
}
// 追加报价 修改
const onChangeAppendPrice = async (item) => {
  const value = parseFloat(item.appendPrice)
  if (isNaN(value)) {
    ElMessage.error('请输入正确的报价')
    return
  }

  // 更新数据为数字类型
  item.appendPrice = value
  await updateAppendPrice({ id: item.id, appendPrice: value, supplierId: item.supplierId })
  await refTable.value.initTable()
}
// 评审报价 修改
const onChangeReviewPrice = async (row) => {
  const value = parseFloat(row.reviewPrice)
  if (isNaN(value)) {
    ElMessage.error('请输入正确的评审报价')
    return
  }
  // 更新数据为数字类型
  row.reviewPrice = value
  await updateReviewPrice({ id: row.id, reviewPrice: value })
  await refTable.value.initTable()
}

// 投标报价 修改
const onChangeBidPrice = async (row) => {
  const value = parseFloat(row.bidPrice)
  if (isNaN(value)) {
    ElMessage.error('请输入正确的投标报价')
    return
  }

  // 更新数据为数字类型
  row.bidPrice = value
  await updateBidPrice({ id: row.id, bidPrice: value })
  await refTable.value.initTable()
}
// 单位确认 修改
const onChangeUnitConfirm = async (row) => {
  await confirmUnit({ id: row.id, unitConfirm: row.unitConfirm, version: row.version })
  await refTable.value.initTable()
}

const onSupplierGet = async () => {
  await getOASuppliers({ projectId: projectInfo.id })
  await refTable.value.initTable()
}
// 批量确认
const onBatchConfirm = async () => {
  await batchConfirm()
  await refTable.value.initTable()
}
// 批量取消确认
const onBatchCancelConfirm = async () => {
  await batchCancelConfirm()
  await refTable.value.initTable()
}

// 项目负责人 修改
const onChangeProjectManager = async (val, row) => {
  await updateProjectManager({ projectManager: val, id: row.id })
  await refTable.value.initTable()
}
// 工期 修改
const onChangeDuration = async (row) => {
  await updateDuration({ id: row.id, duration: row.duration })
  await refTable.value.initTable()
}
// 质量 修改
const onChangeQuality = async (row) => {
  await updateQuality({ id: row.id, quality: row.quality })
  await refTable.value.initTable()
}
</script>

<style scoped lang="scss">
.del-icon {
  color: #f56c6c;
  position: absolute;
  cursor: pointer;
  left: 70px;
  top: 4px;
}
.electronic-title {
  margin-bottom: 40px;
  .title {
    font-weight: 700;
    font-size: 30px;
    color: #2a2b34;
  }
  .tag {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: #8291a9;
    background: #eff2f6;
    border-radius: 6px;
    padding: 10px 20px;
  }
}
:deep(.option-box) {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: flex-start !important;
}
:deep(.option-btn) {
  width: 100% !important;
}
.red-box {
  border: 1px solid #f56c6c;
  border-radius: 4px;
}
</style>
